<template>
  <el-tabs v-model="tabsValue" type="border-card">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
      :disabled="tab.disabled"
    >
      <form-create v-if="tab.rule" v-model="tab.form" :rule="tab.rule" :option="option" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Utils from '../Utils'
import Shape from './Shape'

// 引入formCreate相关的依赖
import formCreate from '@form-create/element-ui'

// 引入自定义的vue组件
import PktMultiInput from './props/MultiInput.vue'
import PktMultiPairInput from './props/MultiPairInput.vue'
import PktCodeMirror from './props/CodeMirror'
import PktEventButton from './props/EventButton.vue'
import PktEmbedUrl from './props/EmbedUrl.vue'

// 自定义的vue组件注册到formCreate组件中
formCreate.component('pkt-multi-input', PktMultiInput)
formCreate.component('pkt-multi-pair-input', PktMultiPairInput)
formCreate.component('pkt-code-mirror', PktCodeMirror)
formCreate.component('pkt-event-button', PktEventButton)
formCreate.component('pkt-embed-url', PktEmbedUrl)

export default {
  name: 'PhuketPanelShape',
  components: {
    formCreate: formCreate.$form() // formCreate组件注册到本组件中
  },
  props: {
    modeler: {
      type: Object,
      required: true
    },
    shape: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      tabsValue: 'general',
      tabs: Shape.getShapePanel(this, this.modeler, this.shape),
      // 组件参数配置
      option: {
        // 组件全局配置
        global: {
          // 设置所有组件
          '*': {
            col: {
              span: 23 // 栅格占据的列数
            },
            props: {
              disabled: false
            }
          }
        },
        // 提交按钮样式配置
        submitBtn: false, // 隐藏默认提交按钮
        // 重置按钮样式配置
        resetBtn: false
      }
    }
  },
  watch: {
    shape: function() {
      console.log('shape变化')
      this.tabs = Shape.getShapePanel(this, this.modeler, this.shape)
    }
  },
  mounted: function() {
    this.validate()
  },
  methods: {
    // 验证
    validate() {
      const messages = []
      // 校验参数
      if (this.tabs) {
        let count = 0
        for (let i = 0; i < this.tabs.length; i++) {
          // 通过form提交的方式验证所有表单
          try {
            this.tabs[i].form.submit((formData, $f) => {
              count++
            })
          } catch (err) {
            console.err(err)
          }
        }
        if (count < this.tabs.length) {
          messages.push('右侧面板参数验证没有通过')
        }
      }
      // 获取Shape上的信息
      const message = this.shape.businessObject['$message']
      if (message) {
        const msgs = JSON.parse(message)
        messages.push(...msgs)
      }
      // 输出提示信息
      if (messages.length > 0) {
        for (let i = 0; i < messages.length; i++) {
          messages[i] = this.shape.id + ' - ' + messages[i]
        }
        Utils.message(this, messages, 'warning')
      }
    }
  }
}
</script>
